<template>
  <div class="employees">
    <el-card class="header">
      <el-button type="primary" @click="upload">导入</el-button>
      <el-button type="primary" @click="add">+新增员工</el-button>
      <el-button
        v-control="'employees_button'"
        v-print="{ id: 'print' }"
        type="primary"
        @click="print"
      >
        打印
      </el-button>
    </el-card>
    <el-card>
      <div id="print">
        <el-table :data="list">
          <el-table-column label="序号">
            <template v-slot="{ $index }">
              {{ (page.page - 1) * page.size + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" />
          <el-table-column label="头像">
            <template v-slot="{ row }">
              <img
                v-imgerror="errorImg"
                :src="row.staffPhoto"
                class="userPhoto"
                alt=""
                @click="imgClick(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" />
          <el-table-column prop="workNumber" label="工号" />
          <el-table-column prop="formOfEmployment" label="聘用形式">
            <template v-slot="{ row }">
              <div v-hireType="row.formOfEmployment" />
              <!-- {{ row.formOfEmployment | hireType }} -->
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" />
          <el-table-column prop="timeOfEntry" label="入职时间">
            <template v-slot="{ row }">
              {{ row.timeOfEntry | formatTime }}
            </template>
          </el-table-column>
          <el-table-column prop="enableState" label="状态" />
          <el-table-column v-if="play" label="操作" width="300px" fixed="right">
            <template v-slot="{ row }">
              <el-button type="text" @click="look(row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="role(row.id)">角色</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="myPage">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[1, 2, 5, 10, 100]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="currChange"
        />
      </div>
    </el-card>
    <Dialog :is-show.sync="show" @getData="getData" />
    <el-dialog :visible.sync="showQrcode">
      <div class="qrcode">
        <canvas ref="canvas" />
      </div>
    </el-dialog>
    <DialogRole ref="dialogRole" />
  </div>
</template>
<script>
import Dialog from './components/dialog.vue'
import DialogRole from './components/dialogRole.vue'
import { sysUse, sysUserDelete } from '@/api/employees.js'
import Qrcode from 'qrcode'
export default {
  name: '',
  components: { Dialog, DialogRole },
  data() {
    return {
      play: true,
      showQrcode: false,
      errorImg: require('@/assets/common/head.jpg'),
      page: {
        page: 1,
        size: 5
      },
      total: 100,
      list: [],
      show: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 请求数据
    async getData() {
      const res = await sysUse(this.page)
      console.log(res)
      res.data.rows.forEach((item) => {
        if (item.formOfEmployment) {
          item.formOfEmployment = +item.formOfEmployment
        } else {
          item.formOfEmployment = 1
        }
      })
      this.list = res.data.rows
      this.total = res.data.total
    },
    // formatter(row, column, cellValue, index) {
    //   const result = employees.hireType.find((item) => {
    //     return item.id === cellValue
    //   })
    //   return result ? result.value : '-'
    // },
    sizeChange(size) {
      this.page.size = size
      this.page.page = 1
      this.getData()
    },
    currChange(page) {
      this.page.page = page
      this.getData()
    },
    add() {
      this.show = true
    },
    del(id) {
      this.$confirm('确定开除该员工吗', '提示')
        .then(async() => {
          await sysUserDelete(id)
          this.getData()
        })
        .catch(() => {})
    },
    upload() {
      this.$router.push(
        '/employees/import?name=' +
          encodeURIComponent('员工') +
          `&redirect=${encodeURIComponent('/employees')}`
      )
    },
    look(id) {
      this.$router.push('/employees/details/' + id)
    },
    imgClick(url) {
      if (!url) {
        this.$message.error('暂无图片')
        return
      }
      this.showQrcode = true
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.canvas, url, {
          width: 300,
          height: 300
        })
      })
    },
    print() {
      this.play = false
      this.$nextTick(() => {
        this.play = true
      })
    },
    endCallback() {
      this.play = true
    },
    role(id) {
      this.$refs.dialogRole.isShow = true
      this.$refs.dialogRole.getUserInfo(id)
    }
  }
}
</script>
<style scoped lang="scss">
.employees {
  padding: 30px;
  .header {
    text-align: right;
    margin-bottom: 10px;
  }
  .myPage {
    margin-top: 20px;
  }
}
.userPhoto {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.qrcode {
  text-align: center;
}
</style>
